{{define "chapter/bindjson.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>这里是 bindjson</h1><br>
<form  method="post">
    <input type="text" id="name" placeholder="请输入用户名"><br>
    <input type="text" id="age" placeholder="请输入年龄"><br>
    <input type="text" id="addr" placeholder="请输入地址"><br>
    <input type="button" value="提交" id="btn_add"><br>
</form>

<script>
    var btn_add = document.getElementById("btn_add")
    btn_add.onclick = function(ev){
        var name = document.getElementById("name").value;
        var age = document.getElementById("age").value;
        var addr = document.getElementById("addr").value;

        $.ajax({
            url:"/bindjsonpost",
            type:"POST",
            data: JSON.stringify({
                "name":name,
                "age":Number(age),
                "addr":addr,
            }),
            contentType:"application/json",
            dataType:"json",
            success:function(data){
                console.log(data);
                alert(data["data"]);
                alert(data["msg"]);
            },
            fail:function(data){
                alert("服务器发生错误!");
            }
        })
    }
</script>
</body>
</html>
{{end}}